<template>
  <view style="background-color: #D3FAF1 ;">
    <view class="scl-checkup-page" :style="{
        backgroundImage:'url('+staticImgs.bg+')',
        paddingBottom: '68rpx'
     }">
      <u-navbar leftIconColor="#fff" @leftClick="backToPage" bgColor="transparent">
      </u-navbar>
      <view class="top-main-wrapper">
        <view class="more-info-wrapper">
          <view class="abs-more-info" v-if="recentTestDate">
            <view>
              最近检测：{{recentTestDate}}
            </view>
            <view>
              检测进度：{{detectionProgress}}%
            </view>
          </view>
          <view class="abs-total-report" v-if="isShowTotalReport" @click="showTotalReport()">
            <image class="icon" :src="staticImgs.orderIcon" mode=""></image>
            <text>体检总报告</text>
          </view>
        </view>

        <view class="avatar-box">
          <image class="img" :src="avatarImg" mode=""></image>
          <!-- {{JSON.stringify(topBubbleArr)}} -->
          <template v-if="renderBubble">
            <template v-for="(item,index) in topBubbleArr">
              <Bubble :useTip="item.isShowGuideTip" v-if="actSclName != item.remark" :obj="item"
                @cusClick="clickBubble(item)" :status="item.moduleHealthStatus" :str="item.remark" :outSty="item.out"
                :innerSty="item.inner" :adsStyle="item.ads" />
            </template>
          </template>
        </view>


        <view class="warning-info-box">
          <view class="row-1">{{checkupTip}}</view>
          <view class="row-2">深入的检测，才能精准的定位问题</view>
          <view class="row-3">快来做一次个人心理健康体检吧~</view>
        </view>
      </view>

      
      <view  class="scl-group-list-box-wrapper" >
        <view class="choice-group-list" v-if="showCheckupPrice">
          <view class="left-col" :class="[actGroup == 'base' ? 'act-col' :'']" @click="changeActGroup('base')">
            <view class="row-1">解锁测评</view>
            <view class="row-2">￥{{sclInfo.newOriginalPrice || ''}}</view>
            <view class="row-3">仅包含当前测评分析</view>
          </view>
          <view class="right-col" :class="[actGroup == 'all' ? 'act-col' :'']" @click="changeActGroup('all')">
            <view class="row-1">解锁全维检测</view>
            <view class="row-2">￥{{sclOtherInfo.price || ''}}</view>
            <view class="row-3">包含6个测评及对应分析</view>
          </view>
        </view>
        <view  class="scl-group-list-box">
          <view  :class="[isActScl90 ? 'tit-img-box-scl90' : 'tit-img-box']">
            <image class="img" :src="boxTit" mode=""></image>
          </view>

          <view class="main-wrapper">
            <view class="tit-intro">
              多维度测评，全面分析心理健康程度
            </view>
            
            <template v-if="sclList.length>0">
              <template v-if="isActScl90">
                <view class="intro-tit-box">
                  包含
                </view>
                <view class="scl-list" style="border-bottom: none;padding-bottom: 30rpx;">
                  <view class="scl-box" v-for="(scl,index) in sclList_1" :key="index">
                    <view class="name">{{scl.sclName || ''}}</view>
                    <view class="num">X1</view>
                    <view class="price">¥{{scl.newOriginalPrice || ''}}</view>
                  </view>
                </view>
                <view class="intro-tit-box">不包含</view>
                <view class="scl-list unact-scl-list" >
                  <view class="scl-box" v-for="(scl,index) in sclList_2" :key="index">
                    <view class="name">{{scl.sclName || ''}}</view>
                    <view class="num">X1</view>
                    <view class="price">¥{{scl.newOriginalPrice || ''}}</view>
                  </view>
                </view>
              </template>
              <template v-else>
                <view class="intro-tit-box">
                  {{sclListData.length}}个测评
                </view>
                <view class="scl-list" >
                  <view class="scl-box" v-for="(scl,index) in sclListData" :key="index">
                    <view class="name">{{scl.sclName || ''}}</view>
                    <view class="num">X1</view>
                    <view class="price">¥{{scl.newOriginalPrice || ''}}</view>
                  </view>
                </view>
              </template>
            </template>
           
            <view class="scl-more-info">
              <template>                
                <view class="info-item">
                  <view class="label">测评总价</view>
                  <view class="price">￥{{priceObj.sumPrice || ''}}</view>
                </view>
                <view class="info-item">
                  <view class="label">优惠减免</view>
                  <view class="del-price">-￥{{priceObj.deratePrice || '0'}}</view>
                </view>
              </template>
              
              <view class="info-item">
                <view class="label bold-label">实际需付款</view>
                <view class="price bold-price">￥{{priceObj.payPrice || ''}}</view>
              </view>

            </view>
          </view>

          <view class="button-wrapper" @click="toOrderPay">
            <image class="img" :src="staticImgs.toPayBtn" mode=""></image>
          </view>

        </view>
      </view>

    </view>

    <TLoading ref="tLoading" />

  </view>
</template>

<script>
  import {
    removeEmptyProperty
  } from '@/common/utils/util.js'
  import Bubble from './Bubble.vue'

  import {
    mapGetters,
    mapState
  } from 'vuex'
  import {
    updateUserInfo
  } from '@/common/api/user_api.js'
  
  import {
    unescape
  } from '@/common/utils/util.js'
  import {
    debounce
  } from 'lodash'
  
  import TLoading from '@/components/tt-loading.vue'

  export default {
    components: {
      Bubble,
      TLoading
    },
    props:{
      sclInfo:{
        type:Object,
        default:()=>{}
      },
      isFromCheckup:{
        type:Boolean,
        default:false
      },
      showCheckupPrice:{
        type:Boolean,
        default:false
      },
      checkupTip:{
        type:String,
        default:''
      },
      isScl90:{
        type:Boolean,
        default:false
      }
    },
    data() {
      return {
        staticImgs: {
          bg: this.imgBaseURL + '/scl/checkup-mental/bg-1-v2.png',
          box1: this.imgBaseURL + '/scl/checkup-mental/box-1-v2.png',
          box1NoNum: this.imgBaseURL + '/scl/checkup-mental/box-1-v3.png',
          btn1: this.imgBaseURL + '/scl/checkup-mental/btn-1.png',
          maleAvatar: this.imgBaseURL + '/scl/checkup-mental/male-avatar.png',
          femaleAvatar: this.imgBaseURL + '/scl/checkup-mental/female-avatar.png',
          sad_maleAvatar: this.imgBaseURL + '/scl/checkup-mental/sad-male-avatar.png',
          sad_femaleAvatar: this.imgBaseURL + '/scl/checkup-mental/sad-female-avatar.png',
          defaultAvatar: this.imgBaseURL + '/scl/checkup-mental/default-avatar.png',
          sclListBoxTit: this.imgBaseURL + '/scl/checkup-mental/scl-list-box-tit-v2.png',
          closeIcon: this.imgBaseURL + '/scl/close-icon.png',
          btnBoxBg1: this.imgBaseURL + '/scl/info-box-btn.png',
          warnIcon: this.imgBaseURL + '/scl/checkup-mental/warning-icon.png',
          shareIcon: this.imgBaseURL + '/scl/checkup-mental/share-icon.png',
          sclReportBoxTit: this.imgBaseURL + '/scl/checkup-mental/scl-report-box-tit.png',
          orderIcon: this.imgBaseURL + '/scl/checkup-mental/order-icon.png',
          toPayBtn: this.imgBaseURL + '/scl/checkup-mental/to-pay-btn.png',
          boxTitScl90: this.imgBaseURL + '/scl/checkup-mental/scl90-tit.png',
        },
        gender: 0,
        actGroup:'base',
        infoPageStatus: 0, //0 - 展示体检包基本信息，1 - 展示体检包包含的测评及价格
        pageLoading: false,
        sclList: [],
        sclOtherInfo: {},
        payGroupId: '',
        actSclDetail: {},
        showTipModal: false,
        tipsList: [],
        tipObj: {},
        currentTipIndex: 0,
        currentTipKey: 'T1',
        topBubbleArr: [],
        recentTestDate: '', //this.$dayjs().format('YYYY-MM-DD'),
        detectionProgress: 0,
        renderBubble: true,
        showCanvas: false,
        pageDataCommon: {},
        showResult: false,
        report: {},
        pageComp: '',
        totalReportPageVisible: false,
        posterModalVisible: false,
        isDoneQWD: false,
        totalReportEnd: false,
        shareData: {
          title: '个人心理健康体检中心',
          path: '/pages/index/index?userType=check-up',
          imageUrl: this.imgBaseURL + '/share/share-checkup.png',
          desc: '',
          content: ''
        },
        isPayAfterMode:true, //预留开关 防止后续改为先付后测
        sclList_2:[], // 不包含
        sclList_1:[] ,//包含
        sclListData:[]
      }
    },
    watch:{
      showCheckupPrice:{
        handler(val){
          if(!val){
            this.actGroup = 'all'
          }else{
            this.actGroup = 'base'
          }
        },
        immediate:true
      }
    },
    computed: {
      ...mapGetters('user', [
        'clientUserUid',
        'uGender',
        'hasCheckupTipEnd'
      ]),
      ...mapState({
        'isPaySclExamination': state => state.user.isPaySclExamination, //是否已购买测评体检包
        userJson: state => state.user.userJson,
      }),
      priceObj(){
        if(this.actGroup == 'all'){
          return {
            payPrice:this.sclOtherInfo?.price,
            sumPrice:this.sclOtherInfo?.sumPrice,
            deratePrice:this.sclOtherInfo?.deratePrice?.toFixed(2)
          }
        }else{
          if(this.sclInfo?.discountType){
            return  {
              payPrice: this.sclInfo?.discountPrice,
              sumPrice: this.sclInfo?.newOriginalPrice,
              deratePrice: (this.sclInfo?.newOriginalPrice - this.sclInfo?.discountPrice)?.toFixed(2)
            }
          }else{
            return {
              payPrice: this.sclInfo?.newOriginalPrice,
              sumPrice: this.sclInfo?.newOriginalPrice,
              deratePrice: 0
            }
          }
        }
      },
      showPrice(){
        if(this.actGroup == 'all'){
          return this.sclOtherInfo.price
        }else{
          if(this.sclInfo.discountType){
            return this.sclInfo.discountedPrice 
          }else{
            return this.sclInfo.newOriginalPrice 
          }
        }
      },
      isActScl90(){
        return this.showCheckupPrice && this.isScl90 && this.actGroup == 'base'
      },
      boxTit(){
        return this.isActScl90 ? this.staticImgs.boxTitScl90 : this.staticImgs.sclListBoxTit
      },
      avatarImg() {
        let sexCode = this.uGender || 0
        // 性别(字典 0未知 1男 2女)
        let avatarArr = [this.staticImgs.defaultAvatar, this.staticImgs.maleAvatar, this.staticImgs.femaleAvatar]

        try {
          if (this.report.scoreArr.some(item => !item.isOk)) {
            avatarArr = [this.staticImgs.defaultAvatar, this.staticImgs.sad_maleAvatar, this.staticImgs
              .sad_femaleAvatar]
          }
        } catch (err) {

        }



        return avatarArr[sexCode] //this.staticImgs.defaultAvatar
      },
      pageStatus() {
        // 1 - 未购买样式(体检包基础介绍)，2 - 展示体检包介绍（包含的测评及相应价格）样式，3 - 展示体检包详情 并 根据其
        // if(this.showResult){
        if (this.totalReportPageVisible) {
          return 5
        } else if (this.actSclDetail?.isSclReport == 'Y') {
          return 4
        } else if (this.isPaySclExamination) {
          return 3
          // return 2
        } else if (this.infoPageStatus === 0) {
          return 1
        } else if (this.infoPageStatus === 1) {
          return 2
        }

        return 0
      },

      actSclName() {
        return this.actSclDetail.remark
      },
      isShowTotalReport() {
        return this.isPaySclExamination && this.isDoneQWD
      }
    },
    mounted(opts) {
      console.log(opts, '========================onLoad')
      
      uni.setStorageSync('hasDoneCheckupScl','Y')
      
      uni.setStorageSync('from','afterPayPage')
      if(this.isActScl90){
        uni.setStorageSync('from','afterPayScl90Page')
      }
      uni.setStorageSync('checkupSclId',this.sclInfo.id)
      
      this.getSclListInfo()
      // await this.addLog(opts)
    },
    methods: {
      clickBubble(item){
        console.log(item,'=======clickBubble======')
      },
      changeActGroup(act){
        this.actGroup = act
      },
      updateFinalTip() {
        let tmpJsonStr
        try {
          tmpJsonStr = JSON.parse(this.userJson)
          tmpJsonStr = JSON.stringify({
            ...tmpJsonStr,
            hasCheckupTipEnd: 'Y'
          })
        } catch (e) {
          tmpJsonStr = JSON.stringify({
            hasCheckupTipEnd: 'Y'
          })

        }

        updateUserInfo({
          userJson: tmpJsonStr
        }).then(res => {
          this.$store.commit('user/setUserJson', tmpJsonStr)
        })
      },
      async addLog(opts) {
        const {
          data: res
        } = await this.$u.api.getCheckUpList()
        this.sclOtherInfo = res.data

        if (opts.sourceType || opts.sourseType) {
          this.$u.api.addLog({
            sclId: this.sclOtherInfo.sclId,
            sourseType: opts.sourceType || opts.sourseType
          })
        }

        this.$u.api.addLog({
          sclId: this.sclOtherInfo.sclId,
          sourseType: 0
        })
      },
      showShareModal() {
        this.posterModalVisible = true
      },
      async checkTotalReport() {
        let totalOk = true
        const {
          data: res
        } = await this.$u.api.getCheckupSclTotalReport()
        const dRes = res.data
        dRes.resultList.map(item => {
          if (item.isSclReport == 'N') {
            totalOk = false
          }
        })

        this.totalReportEnd = totalOk

        if (totalOk) {
          this.showTotalReport(dRes)
          console.log(this.hasCheckupTipEnd, '=========this.hasCheckupTipEnd')

          if (!this.hasCheckupTipEnd) {
            this.$refs.tLoading.show()
            await this.initCheckSclGroupTipInfo()
            this.$refs.tLoading.hide()
          }

        } else {
          await this.initCheckSclGroupTipInfo()
        }
      },
      async showTotalReport(otherData) {
        this.$refs.tLoading.show()

        let dRes
        if (!otherData) {
          const {
            data: res
          } = await this.$u.api.getCheckupSclTotalReport()
          dRes = res.data
        } else {
          dRes = otherData
        }

        const tmpScoreArr = []
        dRes.resultList.map(item => {
          tmpScoreArr.push({
            label: item.remark,
            score: item.score,
            str: item.healthType,
            isOk: item.isSclReport == 'Y' ? parseInt(item.score) < Number(item.qujian) : 'Y'
          })
        })

        this.report = {
          createTime: this.$dayjs(dRes.createDate).format("YYYY-MM-DD HH:mm"),
          nickName: dRes.nickName,
          scoreArr: tmpScoreArr,
        }

        this.$refs.tLoading.hide()
        this.totalReportPageVisible = true

        this.actSclDetail = {
          remark: ''
        } // 不要删除，用于清理actSclName
      },
      
      
      async initPageInfo() {
        let tmpObj = {}
        if(!this.isScl90){
          tmpObj = {
            sclId:this.sclInfo.id
          }
          this.actGroup = 'all'
        }
        
        const {
          data: res
        } = await this.$u.api.getCheckUpSclDetail(tmpObj)        

        this.setProgress(res)
        this.sclList = res.data.sclExaminationDetailBOS
        if(this.sclList.length>0){
          
          this.setSclListMore()
          
          this.actSclDetail = res.data.sclExaminationDetailBOS[res.data.sclExaminationDetailBOS.length - 1]
          for (let i = 0; i < this.sclList.length; i++) {
            if (this.sclList[i].isSclReport == 'N') {
              this.actSclDetail = this.sclList[i]
              break
            }
          }
          
          const qwdScl = res.data.sclExaminationDetailBOS.find(obj => obj.type === 0)
          this.isDoneQWD = qwdScl.isSclReport == 'Y'  
        }
        
        this.setTopBubbleArr(res.data.sclExaminationDetailBOS)
      },
      setSclListMore(){
        this.sclList_1 = []
        this.sclList_2 = []
        
        console.log(this.sclList,'-----this.sclList')
        this.sclList.map((item)=>{
          //将当前测评加入到 this.sclList_1 中，其他的加入到 this.sclList_2中
          if(item.sclId == this.sclInfo.id){
            this.sclList_1.push(item)
          }else{
            this.sclList_2.push(item)
          }
        })
      },
      async initCheckSclGroupTipInfo(isNewPay) {
        const {
          data: res
        } = await this.$u.api.getCheckUpSclTextList()
        if (res.code == 200) {
          this.tipsList = res.data.jsonArray

          if (res.data.showKey) {
            if (isNewPay) {
              res.data.showKey = 'T1'
            }
            this.currentTipIndex = this.tipsList.findIndex(obj => obj.key === res.data.showKey)
            this.currentTipKey = res.data.showKey
            this.tipObj = this.tipsList[this.currentTipIndex]

            // setTimeout(()=>{

            // },300)
            this.$nextTick(() => {
              this.showTipModal = true
            })
          } else {
            this.tipObj = this.tipsList[0]
            this.currentTipKey = this.tipObj.key
            this.currentTipIndex = 0
          }

          console.log(this.tipsList, '================this.tipsList')
        }

      },
      async setCurrentTipIndex(targetObj,side) {
        const key = targetObj.next
        if (targetObj.type == 'close') {
          if (this.totalReportEnd) {
            this.updateFinalTip()
          }
          return this.showTipModal = false
        }
        if (targetObj.type == 'skip') {
          return uni.navigateTo({
            url: '/subcontractorD/pages/sclDoQuestion/sclDoQuestion?paramObj=' + JSON.stringify({
              sclId: targetObj.next,
              sclReportType: 1,
            }),
            success: () => {
              this.showTipModal = false
            }
          })
        }

        if (this.currentTipKey == 'T2') {
          this.changeGender(key == 'T3' ? 2 : 1)
        } else if (this.currentTipKey == 'T6') {
          this.$refs.tLoading.show()
          await this.$u.api.giveScl()
          // this.setCurrentTipIndex(targetObj)
          await this.initPageInfo()
          await this.initCheckSclGroupTipInfo()
          return this.$refs.tLoading.hide()
        }

        this.currentTipIndex = this.tipsList.findIndex(obj => obj.key === key)
        this.currentTipKey = key
        
        
        
        this.tipObj = this.tipsList[this.currentTipIndex]
      },
      toSclDetail() {
        uni.navigateTo({
          url: '/subcontractorD/pages/sclDoQuestion/sclDoQuestion?paramObj=' + JSON.stringify({
            sclId: this.actSclDetail.sclId,
            sclReportType: 1,
          })
        })
      },
      toSclReportDetail() {
        uni.navigateTo({
          url: '/subcontractorB/pages/sclResult/sclResult?id=' + this.actSclDetail.sclExaminationReprotId +
            '&sclReportType=1'
        })
      },
      changeGender(gender) {
        this.$refs.tLoading.show()
        updateUserInfo({
          sex: gender
        }).then(res => {
          if (res.data.code == 200) {
            let userInfo = this.$store.getters['user/getUserInfo'];
            userInfo.sex = gender
            this.$store.commit('user/setUserInfo', userInfo)
          } else {
            this.$showToast(res.data.message)
          }
        }).finally(() => {
          // uni.hideLoading()
          this.$refs.tLoading.hide()
        })
      },
      backToPage() {
        // 获取是否存在上一页面，如果不存在则返回到测评大厅
        const pages = getCurrentPages()

        if (pages.length === 1) {
          uni.reLaunch({
            url: '/pages/sclList/sclList'
          })
        } else {
          
          
          uni.navigateBack()
        }
      },
      async getSclListInfo() {
        this.$refs.tLoading.show()
        const {
          data: res
        } = await this.$u.api.getCheckUpList()
        this.sclList = res.data.sclExaminationBOS
        this.sclListData = JSON.parse(JSON.stringify(this.sclList))
        if(this.checkupTip == '您的抑郁程度可能存在异常'){
          this.sclListData = this.sclList.filter(item => !item.sclName.includes("全维度"))
          const tmpO = this.sclList.find(item => item.sclName.includes("全维度"))
          // 
          res.data.sumPrice = (res.data?.sumPrice - tmpO?.newOriginalPrice)?.toFixed(2)
          res.data.deratePrice = (res.data?.sumPrice - res.data?.price)?.toFixed(2)
        }
        this.setSclListMore()
        this.sclOtherInfo = res.data
        this.sclOtherInfo.deratePrice = Math.abs(this.sclOtherInfo.deratePrice)
        this.payGroupId = this.sclOtherInfo.sclId

        this.setTopBubbleArr(res.data.sclExaminationBOS)
        this.$refs.tLoading.hide()
      },
      extractNumbers(str) {
        // 使用正则表达式 \d+ 匹配所有的数字
        const regex = /\d+/g;
        const numbers = str.match(regex);
        return numbers ? numbers.map(Number) : [];
      },
      setProgress(res) {
        if (res.data.lastDetectionTime) {
          this.recentTestDate = this.$dayjs(res.data.lastDetectionTime).format('YYYY-MM-DD')
        } else {
          this.recentTestDate = ''
        }

        this.detectionProgress = res.data.detectionProgress ? res.data.detectionProgress.toFixed(1) : 0
      },
      setTopBubbleArr(arr) {
        this.topBubbleArr = []
        const tmpStyleArr = [{ // 全维度
          name: '全维度',
          ads: {
            bottom: '100rpx',
            left: '0',
            animationDelay: '2.4s'
          },
          inner: {
            width: '154rpx',
            height: '154rpx'
          },
          out: {
            width: '190rpx',
            height: '190rpx'
          },
        }, { // 抑郁
          name: '抑郁',
          ads: {
            bottom: '100rpx',
            right: '100rpx',
            animationDelay: '1.2s'
          },
          // inner:{},
          // out:{},
        }, { // 焦虑
          name: '焦虑',
          ads: {
            top: '136rpx',
            right: '-48rpx',
            animationDelay: '2.4s'
          },
          // inner:{},
          // out:{},
        }, { // 人际关系
          name: '人际关系',
          ads: {
            bottom: '92rpx',
            right: '-90rpx',
            animationDelay: '1.8s'
          },
          // inner:{},
          // out:{},
        }, { // 压力
          name: '压力',
          ads: {
            top: '160rpx',
            left: '-90rpx',
            animationDelay: '0.6s'
          },
          // inner:{},
          // out:{},
        }, { //敏感
          name: '敏感',
          ads: {
            top: '0',
            left: '-6rpx',
            animationDelay: '0s'
          },
          // inner:{},
          // out:{},
        }]
        for (let i = 0; i < arr.length; i++) {
          const objStyle = tmpStyleArr.find(obj => obj.name == arr[i].remark)

          this.topBubbleArr.push({
            ...arr[i],
            name: arr[i].sclName,
            ...objStyle,
          })
        }

        console.log(this.topBubbleArr, '=====this.topBubbleArr')
      },
      toOrderPay() {
        const that = this
        const arr = this.$SUBSCRIBE_CODES

        uni.getSetting({ //getSetting获取用户的当前设置
          withSubscriptions: true,
          success: res => {
            console.log('res >>>>', res);
            if (res.subscriptionsSetting.mainSwitch &&
              res.subscriptionsSetting &&
              res.subscriptionsSetting[arr[0]] == 'accept' &&
              res.subscriptionsSetting[arr[1]] == 'accept' &&
              res.subscriptionsSetting[arr[2]] == 'accept') {
              that.orderPay()
            } else {
              uni.requestSubscribeMessage({
                tmplIds: arr,
                success(res) {
                  console.log('成功');
                  that.orderPay()
                  
                },
                fail(res) {
                  console.log('失败');
                  that.orderPay()
                }
              })
            }
          }
        })
      },
      orderPay:debounce(async function () {
        let that = this;
        if(this.pageLoading){
          return 
        }
        this.pageLoading = true
        
        let submitForm 
        if(this.actGroup == 'all'){
         submitForm = removeEmptyProperty({
            orderType: '12',
            sclId: this.payGroupId
          })
        }else{
         submitForm = removeEmptyProperty({
            orderType: '7',
            sclId: this.sclInfo.id
          }) 
          
          const {data:tmpRes} = await this.$u.api.getWxPayToken({
            sclId: this.sclId
          })
          submitForm.sclPayToken = tmpRes.data
        }
        // uni.showLoading()
        this.$refs.tLoading.show()
        this.$u.api.addLog({
          sclId: this.sclOtherInfo.sclId ,
          sourseType: 1
        })
        
        this.$u.api.orderPay(submitForm).then(res => {
          if (res.data.code == 200) {
            uni.requestPayment({
              provider: 'wxpay',
              service: 5,
              orderInfo: res.data.data.wr,
              timeStamp: res.data.data.wr.timeStamp,
              nonceStr: res.data.data.wr.nonceStr,
              package: res.data.data.wr.packageValue,
              signType: res.data.data.wr.signType,
              paySign: res.data.data.wr.paySign,
              success: function(res) {
                console.log(res, '================= uni.requestPayment - res')
                that.pageLoading = false
                that.showTipModal = true

                uni.removeStorageSync('hasDoneCheckupScl')
                uni.removeStorageSync('checkupSclId')
                uni.removeStorageSync('from')
                that.$store.commit('user/setIsPaySclExamination', true)
                that.$emit('payOk',true,that.actGroup)
                
                that.$refs.tLoading.hide()
                setTimeout(()=>{
                  that.pageLoading = false  
                },400)
              },
              fail:function(err){
                that.$showToast('支付取消');
                that.$refs.tLoading.hide()
                setTimeout(()=>{
                  that.pageLoading = false  
                },400)
              }
            })
          } else {
            that.$showToast(res.data.message);
            that.$refs.tLoading.hide()
            setTimeout(()=>{
              that.pageLoading = false  
            },400)
          }

        }).catch(() => {
          this.$refs.tLoading.hide()
          setTimeout(()=>{
            this.pageLoading = false  
          },400)
        })

      },500),
      changeInfoPageStatus(status) {
        this.infoPageStatus = status
      },
    }
  }
</script>

<style lang="scss" scoped>
  .scl-checkup-page {
    width: 100%;
    height: 100vh;
    overflow: scroll;
    overflow-x: hidden;


    background-size: 100%;
    background-repeat: no-repeat;
    // overflow: hidden;
    box-sizing: border-box;

    // background-color: red;

    .top-main-wrapper {
      // padding-top: 360rpx;
      position: relative;
      padding-top: 178rpx;

      .more-info-wrapper {
        width: 100%;
        height: 0;
        border: 0;
        padding: 0;
        position: relative;

        .abs-more-info {
          position: absolute;
          top: -110rpx;
          left: 28rpx;

          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 24rpx;
          color: #FFFFFF;
          line-height: 33rpx;
          text-align: justify;
          font-style: normal;
        }

        .abs-total-report {
          position: absolute;
          top: -110rpx;
          right: 12rpx;

          width: 177rpx;
          height: 60rpx;
          background: rgba(84, 191, 231, 0.7);
          border-radius: 4rpx;

          display: flex;
          align-items: center;
          justify-content: center;

          font-family: PingFang-SC, PingFang-SC;
          // font-weight: bold;
          font-size: 24rpx;
          color: #FFFFFF;
          line-height: 60rpx;
          text-align: justify;
          font-style: normal;

          .icon {
            width: 22rpx;
            height: 24rpx;
            margin-right: 10rpx;
          }
        }

      }


      .avatar-box {
        width: 490rpx;
        height: 540rpx;
        margin: auto;
        position: relative;



        .img {
          width: 100%;
          height: 100%;
        }
      }
    }

    .scl-group-info-box {
      width: 690rpx;
      height: 678rpx;
      background-size: 100%;
      background-repeat: no-repeat;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      box-sizing: border-box;
      padding-bottom: 48rpx;


      .text-wrapper {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #326876;
        line-height: 42rpx;
        text-align: center;
        font-style: normal;
      }

      .to-start-btn-wrapper {
        height: 98rpx;
        width: 338rpx;
        margin-top: 20rpx;

        .img {
          width: 100%;
          height: 100%;
        }
      }

    }

    // .scl-group-info-box -- end
    
    
    
    .scl-group-info-box-paymode-after {
      width: 690rpx;
      height: 636rpx;
      background-size: 100%;
      background-repeat: no-repeat;
      margin: auto;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      align-items: center;
      box-sizing: border-box;
      padding-bottom: 48rpx;
    
    
      .text-wrapper {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #326876;
        line-height: 42rpx;
        text-align: center;
        font-style: normal;
      }
    
      .to-start-btn-wrapper {
        height: 98rpx;
        width: 338rpx;
        margin-top: 20rpx;
    
        .img {
          width: 100%;
          height: 100%;
        }
      }
    
    }
    
    // .scl-group-info-box-paymode-after -- end

    .scl-info-box {
      position: relative;
      background: linear-gradient(180deg, #fff 0%, #EFFFE9 100%);
      box-shadow: 0rpx 6rpx 20rpx 0rpx #BCF1E4;
      border-radius: 24rpx;
      position: relative;
      width: 664rpx;
      padding: 48rpx;
      box-sizing: border-box;
      padding-top: 128rpx;
      margin: auto;


      .name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 34rpx;
        color: #333333;
        line-height: 48rpx;
        text-align: center;
        font-style: normal;
      }

      .scl-name {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 25rpx;
        color: #333333;
        line-height: 36rpx;
        text-align: center;
        font-style: normal;
        margin: 14rpx 0 20rpx 0;
      }

      .scl-con {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #333333;
        line-height: 40rpx;
        text-align: left;
        font-style: normal;
      }

      .start-btn-box {
        background-size: 100%;
        background-repeat: no-repeat;
        height: 90rpx;
        width: 370rpx;
        text-align: center;

        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 72rpx;
        text-align: justify;
        font-style: normal;

        text-align: center;
        margin: auto;
        margin-top: 34rpx;
      }
    }
    
    .warning-info-box{
      width: 659rpx;
      height: 253rpx;
      background: linear-gradient( 180deg, rgba(211,254,243,0.72) 0%, #FFFFFF 100%);
      box-shadow: 0rpx 2rpx 10rpx 0rpx #ACF7E8;
      border-radius: 24rpx;
      margin: auto;
      
      margin-bottom: 46rpx;
      position: absolute;
      bottom: -92px;
      left: 50%;
      transform: translateX(-50%);
      
      .row-1{
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        font-size: 40rpx;
        color: #FE9C68;
        line-height: 56rpx;
        text-stroke: 2px #FFFFFF;
        text-align: center;
        font-style: normal;
        // -webkit-text-stroke: 2px #FFFFFF;
        
        margin: auto;
        margin-top: 28rpx;
        margin-bottom: 20rpx;
      }
      .row-2{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 30rpx;
        color: #FFFFFF;
        line-height: 60rpx;
        text-align: center;
        font-style: normal;
        
        width: 548rpx;
        height: 60rpx;
        background: linear-gradient( 180deg, #95D7FF 0%, #70C9F9 51%, #76ACFE 100%);
        box-shadow: inset 0rpx 1rpx 20rpx 0rpx #30B6CF;
        border-radius: 30rpx;
        
        margin: auto;
        margin-bottom: 20rpx;
      }
      
      .row-3{
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 28rpx;
        color: #326876;
        line-height: 40rpx;
        text-align: center;
        font-style: normal;
      }
    }
    
    .scl-group-list-box-wrapper{
      margin-top: 168rpx;
      
      .choice-group-list{
        display: flex;
        margin-top: 20rpx;
        margin-bottom: 50rpx;
        column-gap: 30rpx;
        justify-content: center;

        
        .left-col{
          width: 260rpx;
          height: 200rpx;
          background: linear-gradient( 176deg, rgba(217, 251, 244, 0.86) 0%, rgba(255, 255, 255, 0.86) 100%);
          
          border-radius: 12rpx;
          
          opacity: 0.86;
        }
        .right-col{
          width: 370rpx;
          height: 200rpx;
          background: linear-gradient( 176deg, rgba(217, 251, 244, 0.86) 0%, rgba(255, 255, 255, 0.86) 100%);
          border-radius: 12rpx;
        }
        
        .act-col{
          box-shadow: 0rpx 2rpx 16rpx 0rpx #A5D7EA;
          border: 3rpx solid #3A98C0;
          box-sizing: border-box;
        }
        
        .row-1{
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #326876;
          line-height: 42rpx;
          text-align: center;
          font-style: normal;
          margin-top: 20rpx;
          margin-bottom: 10rpx;
        }
        .row-2{
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 40rpx;
          color: #326876;
          line-height: 56rpx;
          text-align: center;
          font-style: normal;
          margin-bottom: 10rpx;
        }
        .row-3{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 23rpx;
          color: #326876;
          line-height: 32rpx;
          text-align: center;
          font-style: normal;
        }
        
      }
    }
    
    

    .scl-group-list-box {
      width: 660rpx;
      // height: 745rpx;
      background: linear-gradient(180deg, #EEFFFB 0%, #FFFFFF 45%, #FFFFFF 100%);
      box-shadow: 0rpx 6rpx 20rpx 0rpx #BCF1E4;
      border-radius: 24rpx;
      position: relative;
      margin: auto;
      padding-bottom: 36rpx;
      // margin-top: -116rpx;
      


      // margin-bottom: 68rpx;
      .tit-img-box-scl90{
        left: 50%;
        top: -10rpx;
        transform: translateX(-50%);
        position: absolute;
        width: 484rpx;
        height: 62rpx;
        
        .img {
          width: 100%;
          height: 100%;
        }
      }
      .tit-img-box {
        left: 50%;
        top: -10rpx;
        transform: translateX(-50%);

        width: 416rpx;
        height: 62rpx;
        position: absolute;

        .img {
          width: 100%;
          height: 100%;
        }
      }
      


      .main-wrapper {
        width: 590rpx;
        margin: auto;
        margin-bottom: calc(100rpx + constant(safe-area-inset-bottom));;
        margin-bottom: calc(100rpx + env(safe-area-inset-bottom));;
        padding-top: 64rpx;
        // background-color: red;
        
        .tit-intro{
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 26rpx;
          color: #333333;
          line-height: 37rpx;
          text-align: center;
          font-style: normal;
          margin: auto;
          margin-bottom: 20rpx;
          // margin-top: 64rpx;
        }
        
        .intro-tit-box{
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 800;
          font-size: 30rpx;
          color: #326876;
          line-height: 42rpx;
          text-align: left;
          font-style: normal;
          position: relative;
          margin-left: 18rpx;
          
          margin-bottom: 10rpx;

          
          &::before{
            width: 8rpx;
            top: 10rpx;
            height: 22rpx;
            background: #326876;
            border-radius: 4rpx;
            
            content: '';
            position: absolute;
            left: -18rpx;
          }
        }

        .scl-list {
          display: flex;
          flex-direction: column;
          // justify-content: space-between;
          row-gap: 14rpx;
          padding-bottom: 30rpx;
          border-bottom: 1rpx dashed #979797;

          .scl-box {
            display: flex;
            align-items: center;
            font-family: PingFangSC, PingFang SC;
            font-weight: 400;
            font-size: 28rpx;
            color: #326876;
            // line-height: 40rpx;
            // text-align: justify;
            font-style: normal;

            .name {
              width: 434rpx;
              // background-color: #333;

            }

            .num {
              width: 28rpx;
              // background-color: indianred;
            }

            .price {
              flex: 1;
              // background: #BCF1E4;
              text-align: right;
            }
          }
        }
        
        .unact-scl-list{
          .scl-box{
            color:rgba(50, 104, 118, 0.58);
          }
        }

        .scl-more-info {
          display: flex;
          flex-direction: column;
          row-gap: 14rpx;
          padding-top: 24rpx;


          .info-item {
            display: flex;
            align-items: center;

            .label {
              width: 400rpx;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #326876;
              line-height: 40rpx;
              text-align: left;
              font-style: normal;
            }

            .price {
              flex: 1;
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #326876;
              line-height: 40rpx;
              text-align: right;
              font-style: normal;
            }

            .del-price {
              font-family: PingFangSC, PingFang SC;
              font-weight: 400;
              font-size: 28rpx;
              color: #F90101;
              line-height: 40rpx;
              text-align: right;
              font-style: normal;
              flex: 1;
            }

            .bold-label {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 28rpx;
              color: #326876;
              line-height: 40rpx;
              font-style: normal;
            }

            .bold-price {
              font-family: PingFang-SC, PingFang-SC;
              font-weight: bold;
              font-size: 40rpx;
              color: #326876;
              line-height: 56rpx;
              text-align: right;
              font-style: normal;
            }

          }

        }

      }

      // .main-wrapper - end


      .button-wrapper {
        width: 338rpx;
        height: 98rpx;
        position: fixed;
        left: 50%;
        transform: translateX(-50%);
        bottom: calc(50rpx + constant(safe-area-inset-bottom));
        bottom: calc(50rpx + env(safe-area-inset-bottom));
        
        .img{
          width: 100%;
          height: 100%;
        }
      }


      .close-abs {
        position: absolute;
        right: 34rpx;
        top: 20rpx;

        .img {
          width: 42rpx;
          height: 42rpx;
        }
      }

    }

    .scl-result-container {

      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      padding-bottom: calc(constant(safe-area-inset-bottom));
      padding-bottom: calc(env(safe-area-inset-bottom));

      .result-box {

        width: 700rpx;
        box-sizing: border-box;
        // height: 1259rpx;
        background: linear-gradient(180deg, #FFFFFF 0%, #FFFFFF 100%);
        box-shadow: 0rpx 6rpx 20rpx 0rpx #BCF1E4;
        border-radius: 24rpx;


        padding: 120rpx 20rpx 40rpx 20rpx;
        position: relative;


        .tip-name-1 {
          margin: auto;
          width: fit-content;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 36rpx;
          color: #326876;
          line-height: 50rpx;
          text-align: center;
          font-style: normal;
        }

        .tip-name-2 {
          margin: auto;
          margin-top: 10rpx;
          width: fit-content;

          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 25rpx;
          color: #326876;
          line-height: 36rpx;
          text-align: center;
          font-style: normal;
        }

        .tip-name-3 {
          margin: auto;
          margin-top: 30rpx;
          width: fit-content;

          font-family: PingFangSC, PingFang SC;
          font-weight: 300;
          font-size: 24rpx;
          color: #666666;
          line-height: 33rpx;
          text-align: center;
          font-style: normal;
          margin-bottom: 30rpx;
        }

        .label {
          margin: auto;
          margin-top: 30rpx;
          margin-bottom: 20rpx;
          font-size: 24rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          color: #333333;
          width: fit-content;


          position: relative;

          &::after {
            width: 17rpx;
            height: 1rpx;
            content: '';
            background-color: #979797;
            top: 50%;
            transform: translateY(-50%);
            right: -29rpx;
            position: absolute;
          }

          &::before {
            width: 17rpx;
            height: 1rpx;
            content: '';
            background-color: #979797;
            top: 50%;
            transform: translateY(-50%);
            left: -29rpx;
            position: absolute;
          }
        }

      }

      .start-btn-box {
        background-size: 100%;
        background-repeat: no-repeat;
        height: 70rpx;
        width: 350rpx;
        text-align: center;
        position: fixed;

        bottom: calc(constant(safe-area-inset-bottom));
        bottom: calc(env(safe-area-inset-bottom));


        font-family: PingFang-SC, PingFang-SC;
        font-weight: bold;
        font-size: 32rpx;
        color: #FFFFFF;
        line-height: 70rpx;
        text-align: justify;
        font-style: normal;

        text-align: center;
        margin: auto;
        margin-top: 34rpx;
      }



    }


    .scl-total-report-container {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;

      padding-bottom: calc(constant(safe-area-inset-bottom));
      padding-bottom: calc(env(safe-area-inset-bottom));



      .scl-total-report-wrapper {
        width: 700rpx;
        // height: 852rpx;
        box-sizing: border-box;
        padding: 0 20rpx 30rpx 20rpx;
        background: linear-gradient(180deg, #EEFFFB 0%, #FFFFFF 45%, #FFFFFF 100%);
        box-shadow: 0rpx 6rpx 20rpx 0rpx #BCF1E4;
        border-radius: 24rpx;
        position: relative;



        .wrapper-box-tit {
          height: 170rpx;
          width: 384rpx;
          position: absolute;
          left: 50%;
          top: -114rpx;
          transform: translateX(-50%);

          .img {
            width: 100%;
            height: 100%;
          }
        }

        .share-abs-wrapper {
          position: absolute;
          right: 20rpx;
          top: 58rpx;

          font-family: PingFang-SC, PingFang-SC;
          font-weight: bold;
          font-size: 26rpx;
          color: #146F9E;
          line-height: 37rpx;
          text-align: center;
          font-style: normal;

          display: flex;
          align-items: center;

          .img {
            width: 26rpx;
            height: 26rpx;

            margin-right: 12rpx;
          }
        }

        .label {
          margin: auto;
          margin-top: 114rpx;
          margin-bottom: 20rpx;
          font-size: 24rpx;
          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          color: #333333;
          width: fit-content;


          position: relative;

          &::after {
            width: 17rpx;
            height: 1rpx;
            content: '';
            background-color: #979797;
            top: 50%;
            transform: translateY(-50%);
            right: -29rpx;
            position: absolute;
          }

          &::before {
            width: 17rpx;
            height: 1rpx;
            content: '';
            background-color: #979797;
            top: 50%;
            transform: translateY(-50%);
            left: -29rpx;
            position: absolute;
          }
        }

        .tip-1 {
          margin: auto;
          // margin-top: 30rpx;
          width: fit-content;

          font-family: PingFangSC, PingFang SC;
          font-weight: 300;
          font-size: 24rpx;
          color: #666666;
          line-height: 33rpx;
          text-align: center;
          font-style: normal;
          margin-bottom: 20rpx;
        }

        .tip-2 {
          margin: auto;
          width: fit-content;
          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 26rpx;
          color: #326876;
          line-height: 37rpx;
          text-align: center;
          font-style: normal;

          margin-bottom: 30rpx;
        }



        .res-table-container {

          .data-conclusion-box {

            .label-wrapper,
            .data-wrapper {
              .col-1 {
                width: 288rpx;
              }

              .col-2 {
                width: 100rpx;
              }

              .col-3 {
                width: 272rpx;
                padding-right: 20rpx;
                box-sizing: border-box;
                text-align: right;
                height: 100%;
                overflow: hidden;

                .img {
                  margin-right: 8rpx;
                }
              }

            }

            // .label-wrapper - end

          }
        }

        // .res-table-container - end

        .more-con-box {
          width: 660rpx;
          margin-top: 30rpx;
          font-family: PingFangSC, PingFang SC;
          font-weight: 400;
          font-size: 28rpx;
          color: #333333;
          line-height: 46rpx;
          text-align: justify;
          font-style: normal;
        }


      }


    }
  }

  .btn-base {
    width: 270rpx;
    height: 70rpx;
    border-radius: 45rpx;

    font-family: PingFang-SC, PingFang-SC;
    // font-weight: bold;
    font-size: 32rpx;
    color: #FFFFFF;
    line-height: 70rpx;
    text-align: center;
    font-style: normal;
  }

  .btn-female {
    background: #FCA5C5;
  }

  .btn-normal {
    background: #5ED5FF;
  }





  .data-conclusion-box {
    width: fit-content;
    margin: auto;



    .label-wrapper {
      display: flex;
      width: 660rpx;
      margin: auto;
      border-bottom: 4rpx solid #0B82A2;
      padding-bottom: 16rpx;


      .text {
        font-family: PingFang-SC, PingFang-SC;
        font-weight: 800;
        font-size: 26rpx;
        color: #333333;
        line-height: 37rpx;
        text-align: left;
        font-style: normal;
      }

      .col-1 {
        // width: 48%;
        width: 318rpx;
        padding-left: 20rpx;
        box-sizing: border-box;
      }

      .col-2 {
        // width: 28%;
        width: 120rpx;
      }

      .col-3 {
        // width: 24%;
        width: 222rpx;
        padding-right: 20rpx;
        box-sizing: border-box;
        text-align: right;
      }

    }

    .data-wrapper {
      display: flex;
      align-items: center;
      flex-direction: column;
      // margin-bottom: 64rpx;
      width: 660rpx;
      margin-top: 16rpx;
      // border: 1rpx solid #C1C1C1;
      box-shadow: 0px 0px 0px 0.5px #c1c1c1;
      // padding-bottom: 24rpx;

      .head-row,
      .head-row-err {
        display: flex;
        align-items: center;
        width: 100%;
        height: 96rpx !important;
        background: rgba(220, 244, 255, .32);


        .col-1 {
          width: 200rpx;
          padding-left: 20rpx;
          box-sizing: border-box;

          .text {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #393C5A;
            line-height: 96rpx;
            text-align: left;
            font-style: normal;
          }

          // .colon {
          //   font-size: 32rpx;
          //   font-family: PingFangSC, PingFang SC;
          //   font-weight: 500;
          //   color: #393C5A;
          // }
        }

        .col-2 {
          width: 118rpx;
          box-sizing: border-box;

          .num {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 30rpx;
            color: #0B82A2;
            line-height: 96rpx;
            text-align: left;
            font-style: normal;
          }
        }

        .col-3 {
          // width: 28%;
          display: flex;
          align-items: center;
          width: 180rpx;

          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;

          line-height: 96rpx;
          text-align: left;
          font-style: normal;
          color: #333333;

          .img {
            margin-left: 8rpx;
            width: 26rpx;
            height: 26rpx;
          }
        }

        .col-4 {
          // width: 24%;
          width: 160rpx;
          box-sizing: border-box;
          padding-right: 20rpx;
          text-align: right;

          font-family: PingFangSC, PingFang SC;
          font-weight: 500;
          font-size: 30rpx;
          color: #393C5A;
          line-height: 96rpx;
          font-style: normal;
        }

      }

      .head-row-err {
        background-color: #FFF8F8;

        .col-2 .num {
          color: #F90101;
        }
      }

      .row,
      .row-err {
        display: flex;
        align-items: center;
        width: 100%;
        height: 78rpx;

        .col-1 {
          // width: 32%;
          width: 200rpx;
          padding-left: 20rpx;
          box-sizing: border-box;

          .text {
            font-family: PingFang-SC, PingFang-SC;
            // font-weight: 500;
            font-size: 28rpx;
            color: #333333;
            line-height: 78rpx;
            text-align: left;
            font-style: normal;
          }
        }

        .col-2 {
          // width: 16%;
          width: 118rpx;
          box-sizing: border-box;

          .num {
            font-family: PingFangSC, PingFang SC;
            font-weight: 500;
            font-size: 28rpx;
            color: #0B82A2;
            line-height: 78rpx;
            text-align: left;
            font-style: normal;
          }
        }

        .col-3 {
          // width: 28%;
          width: 180rpx;
          font-family: PingFang-SC, PingFang-SC;
          // font-weight: 500;
          font-size: 28rpx;
          color: #333333;
          line-height: 78rpx;
          text-align: left;
          font-style: normal;

          .img {
            margin-left: 8rpx;
            width: 26rpx;
            height: 26rpx;
          }
        }

        .col-4 {
          // width: 24%;
          width: 160rpx;
          box-sizing: border-box;
          padding-right: 20rpx;

          text-align: right;

          font-family: PingFang-SC, PingFang-SC;
          font-weight: 500;
          font-size: 24rpx;
          color: #393C5A;
          line-height: 78rpx;
          font-style: normal;
        }

      }



      .row-err {
        background-color: #FFF8F8;

        .col-2 .num {
          color: #F90101;
        }
      }

    }




  }

  // .data-conclusion-box - end

  .detailed-results-box {
    // margin-top: 100rpx;
    display: flex;
    flex-direction: column;
    width: 100%;

    .block-tit-wrapper {
      display: flex;
      align-items: center;

      // padding-left: 40rpx;
      .icon {
        width: 16rpx;
        height: 32rpx;
        background: linear-gradient(180deg, #95BEF1 0%, #1A529A 100%);
        border-radius: 12rpx;
        margin-right: 10rpx;
      }

      .text {
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        font-size: 32rpx;
        color: #07356F;
        line-height: 45rpx;
        letter-spacing: 1px;
        text-align: left;
        font-style: normal;
      }
    }

    .p {

      font-family: PingFang-SC, PingFang-SC;
      font-weight: 500;
      font-size: 28rpx;
      color: #333333;
      line-height: 40rpx;

      font-style: normal;
      text-indent: 1.5em;

      text-align: justify;
    }

    .summary-wrapper {

      // padding: 0 40rpx;
      margin-top: 20rpx;
      margin-bottom: 30rpx;

      .tit {
        margin: auto;
        text-align: center;
        font-size: 40rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #185199;
        margin-bottom: 50rpx;

      }
    }

    .block {
      // padding: 0 40rpx;
      // margin-bottom: 40rpx;

      .p {
        // margin-bottom: 30rpx;
      }

      .sub-tit {

        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        color: #195199;
        margin-bottom: 18rpx;
        margin-left: -20rpx;

        font-family: PingFangSC, PingFang SC;
        font-weight: 600;
        font-size: 32rpx;
        color: #195199;
        line-height: 45rpx;
        text-align: left;
        font-style: normal;
      }

      .sub-sub-tit {
        font-size: 32rpx;
        font-family: PingFangSC, PingFang SC;
        font-weight: 500;
        color: #000000;
        margin-bottom: 18rpx;
      }

      .text-list {
        display: flex;
        flex-direction: column;
        row-gap: 16rpx;

        .li {
          width: 694rpx;

          // width: 592rpx;
          height: 75rpx;
          line-height: 75rpx;
          background-image: linear-gradient(270deg, rgba(238, 238, 238, 0) 0%, rgba(245, 249, 255, 0.4) 53%, #D8E9FF 100%);
          background-size: 592rpx 75rpx;
          background-repeat: no-repeat;
          border-radius: 2rpx;
          // opacity: 0.43;

          font-size: 34rpx;
          font-family: PingFang-SC, PingFang-SC;
          // font-weight: 500;
          color: #333333;

          padding-left: 20rpx;
        }
      }
    }




  }

  // .detailed-results-box - end

  .dashed-line {
    margin: auto;
    width: 660rpx;
    height: 1rpx;
    margin: 30rpx auto;

    background-image: repeating-linear-gradient(to right,
        #A9C4F2,
        #A9C4F2 10rpx,
        transparent 10rpx,
        transparent 20rpx);
  }

  // .dashed-line - end
</style>